<script setup lang="ts">
import keywordTitle from '@/components/KeywordTitle/index.vue'
import LinkEffect from '@/components/LinkEffect/index.vue'
import AudioVisualization from '@/components/AudioVisualization/index.vue'
import { downloadFile, copyToClipboard } from '@/utils/index'
import { secondsToMinutes } from '@/utils/index'
import type { GoodsIconData, GoodsInfoResult } from '@/api/details/types'
import { ElMessageBox, ElMessage, ElLoading } from 'element-plus'
import { useAuth } from '~/stores/auth/index'
import APIDetails from '@/api/details'
import type { SetGoodsLikesResult, SetGoodsCollectionResult, SetGoodsSharesResult } from '@/api/details/types'

 interface Emits {
    (e: 'set-link', data: SetGoodsLikesResult): void;
    (e: 'set-collections', data: SetGoodsCollectionResult): void;
    (e: 'set-shares', data: SetGoodsSharesResult): void;
    (e: 'give-reward'): void;
}
const isPlay = shallowRef(false)

const rollDom = shallowRef<HTMLDivElement | null>(null)

let rotateDeg: number = 0
const $emit = defineEmits<Emits>()
const { token } = storeToRefs(useAuth())

const audioVisualizationRef = shallowRef<InstanceType<typeof AudioVisualization> | null>(null)
const durationTime = shallowRef<string>('00:00')
const currentTime = shallowRef<string>('00:00')
const { isNextOperation } = useAuth()

let timer: any
/** dom 开始旋转，并且播放 */
function startSpin() {
    timer = setInterval(() => {
        if (!rollDom.value) return
        rollDom.value.style.transform = `translateX(-50%) rotate(${rotateDeg}deg)`
        rotateDeg += 1
        if (rotateDeg >= 360) {
            rotateDeg = 0
        }
    }, 16)
    audioVisualizationRef.value?.play()
}

/** dom 暂停旋转，并且暂停播放 */
function endSpin() {
    clearInterval(timer)
    audioVisualizationRef.value?.pause()
}

let ctTimer: any
/** 设置播放器倒计时 */
function setCurrentTime() {
    if (ctTimer) {
        clearInterval(ctTimer)
        ctTimer = null
    }
    const ct = Math.ceil(audioVisualizationRef.value?.getCurrentTime() ?? 0)
    currentTime.value = secondsToMinutes(ct)
    if (!isPlay.value) return
    ctTimer = setInterval(() => {
        const ct = Math.ceil(audioVisualizationRef.value?.getCurrentTime() ?? 0)
        currentTime.value = secondsToMinutes(ct)
    }, 1000)
}

function clearCurrentTime() {
    if (!ctTimer) return
    clearInterval(ctTimer)
}

watch(isPlay, (newValue) => {
    if (newValue) {
        /** dom 开始旋转 */
        startSpin()
        setCurrentTime()
    } else {
        /** dom 停止旋转 */
        endSpin()
        clearCurrentTime()
    }
})

/** 当播放器初始化完成 */
function onReady(duration: number) {
    durationTime.value = secondsToMinutes(duration)
}

/** 当用户点击了播放器 */
function onClick() {
    setCurrentTime()
}

/** 当播放器播放完毕 */
function onFinish() {
    /** dom 停止旋转 */
    isPlay.value = false
}

const goodsInfo = inject<Ref<GoodsInfoResult>>('goodsInfo')

const LinkEffectRef = shallowRef<any>(null)

function submitLinks() {
    const GoodsIconData: GoodsIconData = {
        type: (goodsInfo?.value?.type as string),
        id: (goodsInfo?.value?.id as number)
    }
    if (isNextOperation()) {
        APIDetails.setGoodsLikes(GoodsIconData).then(({ data }) => {
            if (goodsInfo?.value.is_likes == 0) {
                LinkEffectRef.value.show()
            }
            $emit('set-link', data)
        })
    }
}

const CollectionEffectRef = shallowRef<any>(null)
function submitCollection() {
    const GoodsIconData: GoodsIconData = {
        type: (goodsInfo?.value?.type as string),
        id: (goodsInfo?.value?.id as number)
    }
    if (isNextOperation()) {
        APIDetails.setCollection(GoodsIconData).then(({ data }) => {
            if (goodsInfo?.value.is_collection == 0) {
                CollectionEffectRef.value.show()
            }
            $emit('set-collections', data)
        })
    }
}

function submitShare() {
    ElMessageBox.confirm(
        '是否复制当前链接？',
        '提示',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
        const GoodsIconData: GoodsIconData = {
            type: (goodsInfo?.value?.type as string),
            id: (goodsInfo?.value?.id as number)
        }

        if (token.value) {
            return APIDetails.setLoginGoodsShares(GoodsIconData)
        } else {
            return APIDetails.setGoodsShares(GoodsIconData)
        }

    }).then(({ data }) => {
        copyToClipboard(window.location.href)
        $emit('set-shares', data)
    }).catch(() => {
        ElMessage.info('已取消')
    })
}

const dialogVisible = shallowRef<boolean>(false)

const carryInfo = ref<any>({})

function handleCarry() {
    if (!isNextOperation()) return
    const loading = ElLoading.service({ lock: true })
    APIDetails.getTransportProfit({
        goods_id: goodsInfo?.value.goods_id,
        type: 'music'
    }).then(({ data }) => {
        carryInfo.value = data
        dialogVisible.value = true
    }).finally(() => {
        loading.close()
    })
}

function submitCarry() {
    const data: any = {
        id: goodsInfo?.value.id,
        type: 'music',
        shop_id: goodsInfo?.value.shop_id,
        transport_profit: carryInfo.value.transport_profit
    }

    APIDetails.setTransport(data).then(() => {
        ElMessage.success('操作成功')
        dialogVisible.value = false
    })
}

function handleDownloadSample() {
    ElMessageBox.confirm(
        '是否下载样片？',
        '提示',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
        downloadFile((goodsInfo?.value?.sample as string))
    }).catch(() => {
        ElMessage.info('已取消')
    })
}

const $router = useRouter()

function handleSearch(key: string) {
    window.open($router.resolve(`/music-search?q=${key}`).href, '_blank')
}
</script>

<template>
    <div class="video-conter">
        <div class="player">
            <img v-if="goodsInfo?.image" class="bg" :src="goodsInfo?.image" alt="img">
            <div class="roll" ref="rollDom">
                <img v-if="goodsInfo?.image" :src="goodsInfo?.image" alt="img">
            </div>
            <div class="control">
                <div v-show="isPlay" @click="isPlay = false">
                    <img style="margin-left: 10px;" src="./images/suspend.svg" alt="suspend">
                </div>
                <div v-show="!isPlay" @click="isPlay = true">
                    <img style="margin-left: 20px;" src="./images/play.svg" alt="play">
                </div>
            </div>
            <div class="audio-visu">
                <AudioVisualization v-if="goodsInfo?.sample" :src="goodsInfo?.sample" class="visualization"
                    ref="audioVisualizationRef" @onReady="onReady" @onClick="onClick" @onFinish="onFinish" />
                <div>{{ currentTime }} / {{ durationTime }}</div>
            </div>
        </div>
        <div class="icons">
            <div class="icons-left">
                <div class="icon" @click="submitLinks">
                    <LinkEffect ref="LinkEffectRef" style="height: 30px;width: 30px;">
                        <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="24.5435mm"
                            height="24.5435mm" version="1.1" style="
                            shape-rendering: geometricPrecision;
                            text-rendering: geometricPrecision;
                            image-rendering: optimizeQuality;
                            fill-rule: evenodd;
                            clip-rule: evenodd;
                        " viewBox="0 0 92 92" xmlns:xlink="http://www.w3.org/1999/xlink">
                            <g>
                                <metadata id="CorelCorpID_0Corel-Layer" />
                                <g id="_2102181204592">
                                    <path :fill="goodsInfo?.is_likes == 1 ? '#e52129' : '#A1A1A1'"
                                        :stroke="goodsInfo?.is_likes == 1 ? '#e52129' : '#A1A1A1'"
                                        stroke-width="0.285262"
                                        d="M33 38l0 25c0,5 2,8 7,8 12,0 19,0 23,0 4,-1 6,-2 7,-5 3,-6 7,-16 9,-22 2,-7 0,-11 -8,-11 -3,0 -9,0 -16,0 2,-14 6,-13 -1,-19 -4,3 -13,12 -17,16 -2,2 -4,5 -4,8z" />
                                    <polygon :fill="goodsInfo?.is_likes == 1 ? '#e52129' : '#A1A1A1'"
                                        points="16,69 27,69 27,35 16,35 " />
                                </g>
                            </g>
                        </svg>
                    </LinkEffect>
                    <span :class="{ active: goodsInfo?.is_likes == 1 }">{{ goodsInfo?.likes || 0 }}</span>
                </div>
                <div class="icon" @click="submitCollection">
                    <LinkEffect ref="CollectionEffectRef" style="height: 30px;width: 30px;">
                        <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="24.5435mm"
                            height="24.5435mm" version="1.1" style="
                            shape-rendering: geometricPrecision;
                            text-rendering: geometricPrecision;
                            image-rendering: optimizeQuality;
                            fill-rule: evenodd;
                            clip-rule: evenodd;
                        " viewBox="0 0 83 83" xmlns:xlink="http://www.w3.org/1999/xlink">
                            <g>
                                <path :fill="goodsInfo?.is_collection == 1 ? '#e52129' : '#A1A1A1'"
                                    :stroke="goodsInfo?.is_collection == 1 ? '#e52129' : '#A1A1A1'"
                                    d="M42 15c14,0 26,12 26,26 0,15 -12,27 -26,27 -15,0 -27,-12 -27,-27 0,-14 12,-26 27,-26zm-1 1l7 16 17 2 -12 11 3 16 -15 -8 -14 8 3 -16 -12 -11 16 -2 7 -16z" />
                            </g>
                        </svg>
                    </LinkEffect>
                    <span :class="{ active: goodsInfo?.is_collection == 1 }">{{ goodsInfo?.collections || 0 }}</span>
                </div>
                <div class="icon" @click="submitShare">
                    <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="24.5435mm" height="24.5435mm"
                        version="1.1" style="
                            shape-rendering: geometricPrecision;
                            text-rendering: geometricPrecision;
                            image-rendering: optimizeQuality;
                            fill-rule: evenodd;
                            clip-rule: evenodd;
                        " viewBox="0 0 117 117" xmlns:xlink="http://www.w3.org/1999/xlink">
                        <g>
                            <metadata id="CorelCorpID_0Corel-Layer" />
                            <path fill="#A1A1A1"
                                d="M28 25l27 0 0 7 -21 0c-2,0 -2,0 -2,2l0 49c0,2 0,2 2,2l49 0c2,0 2,0 2,-2l0 -21 7 0 0 27c0,2 -1,3 -3,3l-61 0c-2,0 -3,-1 -3,-3l0 -61c0,-2 1,-3 3,-3zm30 30c0,2 0,5 0,7 6,0 9,-3 12,-7 2,-5 3,-11 7,-15 5,-4 8,-5 12,-7l0 15 7 0 0 -24c0,-3 -1,-3 -3,-3l-25 0 0 7 16 0c-8,3 -12,6 -14,10 -4,5 -4,8 -5,10 -2,6 -3,7 -7,7z" />
                        </g>
                    </svg>
                    <span>{{ goodsInfo?.shares || 0 }}</span>
                </div>
            </div>
            <div class="icons-right">
                <div class="carry" @click="handleCarry">
                    <el-icon :size="32">
                        <svg class="banyun" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="79.9878mm"
                            height="88.9978mm" version="1.1"
                            style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
                            viewBox="0 0 311.88 347.01" xmlns:xlink="http://www.w3.org/1999/xlink"
                            xmlns:xodm="http://www.corel.com/coreldraw/odm/2003">
                            <g id="圖層_x0020_1">
                                <metadata id="CorelCorpID_0Corel-Layer" />
                                <path class="fil0"
                                    d="M112.64 96.26c-38.31,0 -71.31,22.75 -86.22,55.48 -11.2,9.11 -20.28,20.73 -26.38,34.01 2.8,31.51 21.04,58.57 47.09,73.6 17.01,16.3 40.09,26.32 65.51,26.32 52.3,0 94.7,-42.4 94.7,-94.7 0,-52.3 -42.4,-94.7 -94.7,-94.7zm-19.46 16.52c-33.22,0 -60.16,26.93 -60.16,60.16 0,33.22 26.93,60.16 60.16,60.16 33.22,0 60.16,-26.93 60.16,-60.16 0,-33.22 -26.93,-60.16 -60.16,-60.16z" />
                                <path class="fil0"
                                    d="M72.43 126.43c-13.92,0 -25.21,11.29 -25.21,25.21 0,13.92 11.29,25.21 25.21,25.21 13.92,0 25.21,-11.29 25.21,-25.21 0,-13.92 -11.29,-25.21 -25.21,-25.21zm-13.47 14.36c-3.84,0 -6.95,4.24 -6.95,9.46 0,5.22 3.11,9.46 6.95,9.46 3.84,0 6.95,-4.24 6.95,-9.46 0,-5.22 -3.11,-9.46 -6.95,-9.46z" />
                                <path class="fil0"
                                    d="M22.18 26.19c-0.9,0 -1.79,0.01 -2.68,0.04l0 0.01c-10.75,0.1 -19.43,6.07 -19.5,13.51 -0.07,7.56 8.79,13.77 19.79,13.88 11,0.1 19.97,-5.94 20.04,-13.51 0.01,-1.56 -0.35,-3.07 -1.04,-4.48 31.77,7.48 57.37,30.95 67.82,61.46 1.21,-0.05 2.42,-0.07 3.64,-0.07 1.21,0 2.42,0.03 3.62,0.08 -10.55,-40.79 -47.6,-70.92 -91.69,-70.92z" />
                                <path class="fil0"
                                    d="M149.93 27.27c9.61,14.82 15.2,32.49 15.2,51.46 0,11.28 -1.98,22.1 -5.59,32.13 1.91,1.17 3.77,2.39 5.59,3.69 5.13,-11.66 7.98,-24.54 7.98,-38.09 0,-27.17 -11.45,-51.67 -29.78,-68.94l-0.09 0 -0.07 -0.07c-7.76,-7.79 -18.4,-9.78 -23.76,-4.44 -5.36,5.34 -3.4,15.98 4.36,23.77 7.76,7.79 18.4,9.78 23.76,4.44 1.11,-1.11 1.91,-2.45 2.4,-3.94z" />
                                <circle class="fil1" cx="213.59" cy="325.76" r="17.9" />
                                <path class="fil0"
                                    d="M199.53 310.08c-6.97,-31.43 12.21,-68.28 42.84,-82.31 30.63,-14.03 61.11,0.08 68.08,31.51 6.97,31.43 -12.21,68.28 -42.84,82.31 -9.6,4.4 -19.18,6.03 -28.03,5.23l-0.02 0c-0.79,0 -1.43,-0.64 -1.43,-1.42 0,-0.63 0.42,-1.17 1,-1.35l0.01 -0 0.01 -0 0 -0 0.42 -0.15c5.32,-1.97 10.37,-5.39 14.5,-10.15 11.75,-13.54 11.66,-32.86 -0.2,-43.16 -11.86,-10.3 -31.01,-7.67 -42.76,5.87 -5.84,6.72 -8.75,14.87 -8.75,22.64 -1.16,-2.82 -2.11,-5.82 -2.82,-9z" />
                                <path class="fil0"
                                    d="M302.1 252.12c-4.45,2.64 -9.6,3.79 -14.82,2.94 -10.96,-1.78 -18.81,-11.78 -19.67,-23.78 10.21,-2.49 20.81,-6.03 31.51,-10.64 -3.19,10.62 -2.91,20.57 1.49,28.95 0.46,0.87 0.96,1.71 1.49,2.53z" />
                                <path class="fil0"
                                    d="M152.4 265.71c16.09,-7.51 37.67,4.67 48.19,27.21 10.22,21.89 6.25,45.49 -8.73,53.71 -0.24,0.13 -0.46,0.27 -0.83,0.29 -0.82,0.06 -1.67,-0.64 -1.66,-1.38 0,-0.45 0.17,-0.58 0.33,-0.93 2.71,-4.84 4.32,-10.93 4.32,-17.55 0,-15.73 -9.11,-28.48 -20.34,-28.48 -11.23,0 -20.34,12.75 -20.34,28.48 0,1.95 0.14,3.85 0.41,5.69 0.02,0.1 0.04,0.21 0.04,0.33 0,0.81 -0.66,1.47 -1.47,1.47 -0.5,0 -0.95,-0.25 -1.21,-0.64l-0 -0c-3.38,-3.97 -6.38,-8.6 -8.8,-13.78 -10.52,-22.54 -6,-46.9 10.09,-54.41z" />
                            </g>
                        </svg>
                    </el-icon>
                </div>
                <div class="download" @click="handleDownloadSample">
                    <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="24.5435mm" height="24.5435mm"
                        version="1.1" style="
                            shape-rendering: geometricPrecision;
                            text-rendering: geometricPrecision;
                            image-rendering: optimizeQuality;
                            fill-rule: evenodd;
                            clip-rule: evenodd;
                        " viewBox="0 0 70 70" xmlns:xlink="http://www.w3.org/1999/xlink">
                        <g id="图层_x0020_1">
                            <metadata id="CorelCorpID_0Corel-Layer" />
                            <path fill="#CBA43F" stroke="#CBA43F"
                                d="M30 17c-9,2 -8,8 -13,9 -15,5 -12,23 -1,26 1,1 2,1 4,1 1,0 2,0 3,0 5,0 10,0 14,0 1,0 3,0 5,0 4,0 8,0 11,-1 0,0 1,0 1,0 11,-3 14,-21 -1,-26 -5,-2 -4,-7 -14,-9 -2,-1 -3,-1 -5,-1 -1,0 -2,1 -4,1zm0 10l9 0 0 9 7 0 -6 6 -5 6 -6 -6 -5 -6 6 0 0 -9z" />
                        </g>
                    </svg>
                    <span>免费下载样片</span>
                </div>
                <button class="give-reward" @click="$emit('give-reward')">打赏作品</button>
            </div>
        </div>
        <div class="keyword">
            <keywordTitle>
                <template #title>
                    <div class="title">
                        <p class="t">关键词：</p>
                        <p class="c" v-for="item in goodsInfo?.key ? goodsInfo?.key?.split('/') : []"
                            @click="handleSearch(item)">{{ item }}</p>
                    </div>
                </template>
            </keywordTitle>
        </div>
        <el-dialog v-model="dialogVisible" width="415" :show-close="false">
            <template #header>
                <DialogClose title="搬运此产品的盈利" @close="dialogVisible = false" />
            </template>
            <div class="carry-dialog">
                <div class="money">¥{{ carryInfo.min_price }}-{{ carryInfo.max_price }}<span>元</span></div>
                <div class="text">
                    注意：您点击“同意搬运”时成为该产品的搬运人员。搬运人员只作为协助次产品的销售行为，搬运产品不意味着产品版权的转移。在产品销售后，搬运人员获得一定的销售金额。在“产品管理”里面可以取消搬运产品。
                </div>
                <button type="button" @click="submitCarry">同意搬运</button>
            </div>
        </el-dialog>
    </div>
</template>

<style lang="less" scoped>
.video-conter {
    grid-area: videoConter;
    background-color: #f5f4f8;

    .carry-dialog {
        width: 100%;

        button {
            width: 150px;
            height: 32px;
            line-height: 25px;
            border-radius: 3px;
            background-color: rgba(56, 148, 255, 1);
            color: #ffffff;
            font-size: 12px;
            border: none;
            display: block;
            margin: 0 auto;
            cursor: pointer;
            margin-top: 17px;
            border-radius: 10px;
        }

        .money {
            color: rgba(248, 50, 0, 1);
            font-size: 20px;
            text-align: center;

            span {
                font-size: 14px;
            }
        }

        .text {
            left: 539px;
            top: 444px;
            width: 364px;
            height: 72px;
            color: rgb(139, 139, 139);
            font-size: 12px;
            text-align: left;
            font-family: 'SOURCEHANSANSCN-EXTRALIGHT';
            margin-top: 22px;
        }
    }

    span.active {
        color: #e52129 !important;
        border-color: #e52129 !important;
    }


    .keyword {
        height: 50px;
        display: flex;
        align-items: center;

        .title {
            margin-left: 8px;
            display: flex;
            align-items: center;

            p {
                color: #9a9a9a;
                margin-right: 10px;
            }

            .c {
                font-size: 16px;
                font-weight: 200;
                line-height: 24px;
                cursor: pointer;
                font-family: 'SOURCEHANSANSCN-EXTRALIGHT';
            }

            .t {
                font-size: 16px;
                line-height: 24px;
                color: #BBBBBB;
                font-family: 'SOURCEHANSANSCN-REGULAR';
            }
        }
    }

    .icons {
        width: 95%;
        height: 60px;
        margin: 0 auto;
        border-bottom: 1px dashed#CECECE;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .icons-right {
            display: flex;
            align-items: center;

            .give-reward {
                width: 71px;
                height: 25px;
                line-height: 25px;
                border-radius: 5px;
                background-color: rgba(203, 164, 63, 0.93);
                color: #ffffff;
                font-size: 14px;
                text-align: center;
                cursor: pointer;
                border: none;
            }

            .download {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 120px;
                height: 25px;
                border-radius: 5px;
                font-size: 14px;
                border: 1px solid rgba(203, 164, 63, 0.93);
                margin-right: 32px;
                cursor: pointer;

                svg {
                    width: 22px;
                    height: 22px;
                }

                span {
                    color: rgba(203, 164, 63, 0.93);
                    font-size: 14px;
                    text-align: center;
                    font-family: 'SOURCEHANSANSCN-EXTRALIGHT';
                    white-space: nowrap;
                }
            }

            .carry {
                    margin-right: 33px;
                    cursor: pointer;
                    width: 28px;

                    .banyun {
                        color: #DDDEDE;
                        transition: all .2s;

                        &:hover {
                            color: #E6232A;
                        }
                    }

                img {
                    width: 100%;
                    height: 100%;
                }
            }
        }

        .icons-left {
            display: flex;

            .icon {
                display: flex;
                align-items: center;
                margin-right: 30px;
                cursor: pointer;

                svg {
                    width: 30px;
                    height: 30px;
                    margin-right: 2px;
                }

                span {
                    border-left: 1px solid #a1a1a1;
                    line-height: 1.2em;
                    height: 1.2em;
                    padding-left: 5px;
                    color: rgba(154, 154, 154, 1);
                    font-size: 14px;
                    font-family: 'SOURCEHANSANSCN-EXTRALIGHT';
                }
            }
        }
    }

    .player {
        width: 100%;
        height: 593px;
        overflow: hidden;
        position: relative;

        .audio-visu {
            width: 60%;
            position: absolute;
            bottom: 100px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            align-items: center;
            gap: 0 5px;

            .visualization {
                width: 80%;
            }

            div {
                color: rgba(246, 246, 246, 1);
                font-size: 14px;
                width: 18%;
            }
        }

        .control {
            position: absolute;
            width: 330px;
            height: 330px;
            left: 50%;
            top: 50px;
            transform: translateX(-50%);
            display: flex;
            justify-content: center;
            align-items: center;

            >div {
                cursor: pointer;
                user-select: none;
                color: #ffffff;
                display: flex;
                justify-content: center;
                align-items: center;

                img {
                    width: 100px;
                    height: 100px;
                    display: block;
                }
            }
        }

        .roll {
            position: absolute;
            width: 330px;
            height: 330px;
            background-color: #ffffff;
            border-radius: 50%;
            left: 50%;
            top: 50px;
            overflow: hidden;
            transform: translateX(-50%);


            &:after {
                content: '';
                position: absolute;
                width: 90%;
                height: 90%;
                display: block;
                border: 1px solid #e5e5e5;
                border-radius: 50%;
                z-index: 1;
                top: 50%;
                left: 50%;
                transform: translateX(-50%) translateY(-50%);
            }

            img {
                width: 100%;
                height: 100%;
            }
        }

        .bg {
            position: absolute;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 593px;
            object-fit: cover;
            filter: blur(20px);
        }


    }
}
</style>
